<div class="container-fluid">
  <div class="content-block">
    <div class="row">
      <div class="lead col-sm-8">
        {{ 'SQL_EDITOR.TITLE' | translate }}
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SQL_EDITOR.TOOLTIP' | translate"></i>
      </div>

      <div class="col-sm-4 text-end">
        <div class="wiki-link">
          <a [href]="docUrl" target="_blank"> <i class="fas fa-link"></i> {{ 'SQL_EDITOR.LEARN_SQL' | translate }} </a>
        </div>
      </div>
    </div>

    <code-editor
      id="code"
      [extensions]="extensions"
      [lineWrapping]="true"
      (keydown.f9)="execute()"
      [languages]="languages"
      [language]="'MySQL'"
      [setup]="'basic'"
      [(ngModel)]="service.code"
    />

    <div class="row">
      <div class="col-sm-7">
        <button type="button" class="btn btn-secondary btn-sm me-2" (click)="copy()" id="copy-btn">
          <i class="fa fa-copy fa-sm"></i> {{ 'COPY' | translate }}
        </button>
        <button type="button" class="btn btn-primary btn-sm" (click)="execute()" id="execute-btn">
          <i class="fa fa-bolt fa-sm"></i> {{ 'SQL_EDITOR.EXECUTE' | translate }}
        </button>
      </div>
    </div>

    <keira-query-error [error]="error" />

    @if (affectedRows > -1) {
      <p id="affected-rows-box" class="mt-2">
        <code class="hljs"
          >{{ 'SQL_EDITOR.AFFECTED_ROWS' | translate }} <strong>{{ affectedRows }}</strong> {{ message }}</code
        >
      </p>
    } @else {
      <hr />
      <!--    Display: <select [(ngModel)]="displayLimit" class="select-limit">-->
      <!--      <option *ngFor="let option of displayLimitOptions" [value]="option">{{ option }}</option>-->
      <!--    </select>-->
      <ngx-datatable
        id="editor-table"
        class="bootstrap table table-striped text-center mt-1"
        [rows]="rows"
        [headerHeight]="DTCFG.headerHeight"
        [footerHeight]="DTCFG.footerHeight"
        [columnMode]="DTCFG.columnMode"
        [rowHeight]="DTCFG.rowHeight"
        [limit]="20"
        [scrollbarH]="true"
      >
        @for (col of columns; track col) {
          <ngx-datatable-column [prop]="col" [minWidth]="columns.length === 1 ? 300 : 100" [resizeable]="true" />
        }
      </ngx-datatable>
    }
  </div>
</div>
